<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<title>购买优惠券</title>
		<link rel="stylesheet" href="../css/main.css" />
		<link rel="stylesheet" href="//at.alicdn.com/t/font_439949_a3q4t0un27t.css" type="text/css">
		<script src="../js/jquery.min.js"></script>
		<script src="../js/qrcode/jquery.qrcode.js"></script>
		<script type="text/javascript" src="../js/qrcode/qrcode.js"></script>
		<script type="text/javascript" src="../js/qrcode/utf.js"></script>
		<script src="../js/utils.js"></script>
		<script src="../js/vue.min.js"></script>
		<style>
			.justify-center {
				-webkit-justify-content: center;
				-moz-justify-content: center;
				-ms-justify-content: center;
				-o-justify-content: center;
				justify-content: center;
			}
			
			.buy-tickets {
				width: 100%;
				text-align: center;
				min-height: -webkit-calc(100% - 492px);
				min-height: calc(100% - 492px);
				min-height: -moz-calc(100% - 492px);
			}
			
			.nav-section {
				width: 100%;
				height: 50px;
				background-color: #f2f2f2;
				color: #666666;
				text-align: center;
			}
			
			.nav-section .nav-wapper {
				width: 1200px;
			}
			
			.nav-section .nav-item {
				font-size: 14px;
			}
			
			.nav-section .nav-item.pointer {
				cursor:pointer;
			}
			
			.nav-section .nav-arrow {
				width: 10px;
				height: auto;
				margin: 0 14px;
			}
			
			.main-section {
				width: 1200px;
				display: inline-block;
			}
			
			.main-section .top-tip {
				text-align: left;
				margin-top: 28px;
				height: 16px;
			}
			
			.main-section .top-tip .tip-left {
				color: #ff9c00;
				font-size: 16px;
			}
			
			.main-section .top-tip .tip-right {
				color: #666666;
				font-size: 14px;
				position: relative;
				top: -1;
			}
			
			.select-section {
				margin-top: 30px;
				height: 120px;
			}
			
			.select-section .left {
				height: 100%;
				margin-top: -12px;
				margin-left: -12px;
			}
			
			.select-section .left img {
				height: 148px;
				width: auto;
			}
			
			.select-section .right {
				align-self: flex-end;
			}
			
			.select-section .num-box {
				margin-right: 84px;
				height: 38px;
				-moz-border-radius: 4px;
				-ms-border-radius: 4px;
				-o-border-radius: 4px;
				border-radius: 4px;
				border: 1px solid #dcdcdc;
			}
			
			.select-section .num-box .operate {
				padding-top: 1px;
				font-size: 24px;
				color: #dcdcdc;
				width: 39px;
				height: 38px;
			}
			
			.select-section .num-box .operate.reduce {
				border-right: 1px solid #dcdcdc;
			}
			
			.select-section .num-box .operate.add {
				border-left: 1px solid #dcdcdc;
			}
			
			.select-section .num-box .num {
				font-size: 24px;
				font-weight: 500;
				color: #666666;
				padding: 0 28px;
			}
			
			.select-section .account-box {
				text-align: right;
			}
			
			.select-section .account-box .total-word {
				color: #999999;
				font-size: 14px;
			}
			
			.select-section .account-box .total-money {
				color: #ff0000;
				font-size: 24px;
				font-weight: 500;
			}
			
			.select-section .account-box .deduction-div {
				color: #999999;
				font-size: 12px;
			}
			
			.pay-mode-tip {
				text-align: left;
				margin-top: 58px;
				font-size: 16px;
				color: #222222;
				font-weight: 500;
			}
			
			.pay-mode-box {
				text-align: left;
				margin-top: 28px;
			}
			
			.pay-mode-box .left {
				width: 30px;
				height: 30px;
				-moz-border-radius: 50%;
				-ms-border-radius: 50%;
				-o-border-radius: 50%;
				border-radius: 50%;
				background-color: #2eabfa;
			}
			
			.pay-mode-box .left .circle {
				width: 10px;
				height: 10px;
				-moz-border-radius: 50%;
				-ms-border-radius: 50%;
				-o-border-radius: 50%;
				border-radius: 50%;
				background-color: #FFFFFF;
			}
			
			.pay-mode-box .right {
				margin-left: 18px;
				height: 60px;
				width: 180px;
				-moz-border-radius: 4px;
				-ms-border-radius: 4px;
				-o-border-radius: 4px;
				border-radius: 4px;
				border: 1px solid #dcdcdc;
			}
			
			.pay-mode-box .right .wx-pay-icon {
				width: 29px;
				height: auto;
			}
			
			.pay-mode-box .right .mode-word {
				margin-left: 12px;
				font-size: 16px;
				font-weight: 500;
				color: #333333;
			}
			
			.qrcode-section {
				margin-top: 22px;
				text-align: left;
				width: 460px;
				height: 260px;
				background-color: #f2f2f2;
			}
			
			.qrcode-section .tip-box {
				margin-top: 4px;
				height: 36px;
				width: 166px;
				background-color: #09bc07;
			}
			
			.qrcode-section .tip-box .wx-pay-icon {
				width: 29px;
				height: auto;
			}
			
			.qrcode-section .tip-box .mode-word {
				margin-left: 6px;
				font-size: 16px;
				font-weight: 500;
				color: #FFFFFF;
			}
			
			.qrcode-canvas-container {
				-moz-box-sizing: border-box;
				-webkit-box-sizing: border-box;
				-o-box-sizing: border-box;
				-ms-box-sizing: border-box;
				box-sizing: border-box;
				padding-top: 4px;
				width: 166px;
				height: 166px;
				background-color: #FFFFFF;
			}
		</style>
	</head>

	<body>
		<div id="page_header" class="page-header"></div>
		<div id="page_menu" class="content-area menu items-display-flex flex-row flex-between"></div>
		<div id="city_sets"></div>
		<div id="buy-tickets" class="buy-tickets">
			<div class="nav-section items-display-flex flex-row align-items-center justify-center">
				<div class="nav-wapper items-display-flex flex-row align-items-center">
					<template v-for="(item,index) in navs">
						<span class="nav-item" :class="{'pointer':index!=navs.length-1}" @click="navItemClickHandle(index)">{{item.name}}</span>
						<img class="nav-arrow" src="../img/icon/couple_arrow_right.png" v-if="index!=navs.length-1"></img>
					</template>
				</div>
			</div>
			<!--中间主体内容-->
			<div class="main-section">
				<!--顶部提示-->
				<div class="top-tip">
					<span class="tip-left">注意：</span><span class="tip-right">口袋租房优惠券可重复购买，一次性只能购买一张！</span>
				</div>
				<!--选择数量部分-->
				<div class="select-section items-display-flex flex-row flex-between">
					<div class="left">
						<img src="../img/ticket.png" />
					</div>
					<div class="right items-display-flex flex-row">
						<div class="num-box items-display-flex flex-row align-items-center">
							<div class="operate items-display-flex flex-row justify-center reduce">
								<span class="iconfont icon-jian"></span>
							</div>
							<div class="num" v-text="ticketNum"></div>
							<div class="operate items-display-flex flex-row justify-center add">
								<span class="iconfont icon-jia"></span>
							</div>
						</div>
						<div class="account-box">
							<div class="total-div">
								<span class="total-word">总计：</span><span class="total-money">&yen;<span v-text="totalPrice"></span></span>
							</div>
							<div class="deduction-div">可抵用<span v-text="totalValue"></span>元租房现金</div>
						</div>
					</div>
				</div>
				<!--付款方式-->
				<div class="pay-mode-tip">付款方式</div>
				<div class="pay-mode-box items-display-flex flex-row align-items-center">
					<div class="left items-display-flex flex-row align-items-center justify-center">
						<div class="circle"></div>
					</div>
					<div class="right items-display-flex flex-row align-items-center justify-center">
						<div class="right-wapper items-display-flex flex-row align-items-center">
							<img class="wx-pay-icon" src="../img/icon/wx_pay_icon.png" />
							<div class="mode-word">微信支付</div>
						</div>
					</div>
				</div>
				<!--二维码-->
				<div v-if="userInfo" class="qrcode-section items-display-flex flex-row align-items-center justify-center">
					<div class="qrcode-wapper">
						<div class="qrcode-canvas-container items-display-flex flex-row align-items-center justify-center">
							<div id="qrcode-canvas"></div>
						</div>
						<div class="tip-box items-display-flex flex-row align-items-center justify-center">
							<div class="tip-box-wapper items-display-flex flex-row align-items-center">
								<img class="wx-pay-icon" src="../img/icon/wx_pay_icon2.png" />
								<div class="mode-word">扫码完成支付</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div id="page_footer" class="page-footer"></div>
	</body>
	<script>
		$(document).ready(function() {
			loadHeaderAndFooter();
		});

		function loadHeaderAndFooter() {
			$('#page_header').load('../template/header.html', init);
			$('#page_menu').load('../template/mainmenu3.html');
			$('#city_sets').load('../template/choosecity.html');
			$('#page_footer').load('../template/footer.html');
		}
		var maincnt;

		function init() {
			var maincnt = new Vue({
				el: '#buy-tickets',
				data: {
					navs: [{name:'首页',link:'./index.html'}, 
					{name:'口袋租房',link:'./kdzf.html'},
					{name:'Gowo公寓',link:''},
					{name:'购买优惠券',link:''}],
					ticketNum: 1, //购票数量
					uintPrice: 20, //购买单张票的价格
					ticketValue: 100, //票额
					qrcodeMsg: '',
					userInfo: null,
					oid:'',
					intervalId:-1000,
					couponid:3
				},
				created: function() {
					this.userInfo = getUserInfo();
					if(!this.userInfo) {
						showLogin();
						return;
					}
					
					var cid = getParameter('cid');
					var houseid = getParameter('houseid');
					if(cid) this.couponid = cid;
					if(houseid) this.navs[2].link='./rentdetail.html?houseid='+houseid;
					this.getInitData();
				},
				methods: {
					getInitData: function() {
						var urlstr = publicUrl+'/v1/coupon/buy-qrcode';
						
						var that = this;
						jQuery.get(urlstr, {
							uid: this.userInfo.uid,
							cid: this.couponid
						}, function(res) {
							var result = res.data;
							that.qrcodeMsg = result.order.code_url;
							that.oid=result.oid;
							that.getQrcode();
							that.addInterval();
						});
					},
					getQrcode: function() {
						$("#qrcode-canvas").qrcode({
							render: "canvas", //设置渲染方式，有table和canvas，使用canvas方式渲染性能相对来说比较好  
							text: this.qrcodeMsg, //扫描二维码后显示的内容,可以直接填一个网址，扫描二维码后自动跳向该链接  
							width: "144", //二维码的宽度  
							height: "144", //二维码的高度  
							background: "#ffffff", //二维码的后景色  
							foreground: "#000000", //二维码的前景色  
							src: '../img/qrcode_logo.png'
						});
					},
					addInterval:function(){
						if(this.intervalId!=-1000) return;
						this.intervalId=setInterval(this.pollingResult.bind(this),2500);
					},
					removeInterval:function(){
						if(this.intervalId==-1000) return;
						clearInterval(this.intervalId);
					},
					pollingResult:function(){
//						var urlstr = 'http://pocket.all-star.top/v1/coupon/order-state';
						var urlstr = publicUrl+'/v1/coupon/buy-qrcode';
						var that = this;
						jQuery.get(urlstr, {
							oid: this.oid
						}, function(res) {
							var result = res.data;
							if(result.pay_status.toString()=='1'){
								that.removeInterval();
								window.location = './user.html?menu=2';
							}
						});
					},
					navItemClickHandle:function(index){
						if(index==this.navs.length-1) return;
						var link=this.navs[index].link;
						window.location= link;
					}
				},
				computed: {
					totalPrice:function() {
						return this.ticketNum * this.uintPrice;
					},
					totalValue:function() {
						return this.ticketNum * this.ticketValue;
					}
				},
			});
		}
	</script>

</html>